import React from 'react'
import { UdTable, IUdColumn } from '@/lib'
import { InputNumber } from 'antd'
import dayjs from 'dayjs'

function TerminalTable(props: ITerminalTableProps) {
  const { dataSource, changeTableData } = props

  const changeData = (row, key, value) => {
    // const value = e.target.value || undefined
    const newData = [ ...dataSource ]
    let multiple = 1
    if (row.modifyType === 'UP') {
      // 编辑的是目标客户
      multiple = -1
    }
    // 编辑转移数量，需要同时处理原客户和目标客户的转移数量
    newData.forEach(item => {
      const quotaCanNum = item.quotaCanNum // 原可用配额数量
      if (item.id === row.id) {
        // 当前编辑客户调整后剩余可用数量
        item.modifyAfterNum = quotaCanNum -  (multiple * value)
      } else {
        // 相对客户调整后剩余可用数量
        item.modifyAfterNum = quotaCanNum + (multiple * value)
      }
      // 原客户和目标客户转移数量相同，直接赋值
      item[key] = value
    })

    changeTableData(newData)
  }

  const TRANSFER_MAX = dataSource && dataSource[0] ? dataSource[0].quotaCanNum : 0

  const columns: IUdColumn[] = [
    { title: '序号', dataIndex: 'id', render: (text, record, index) => index + 1 },
    { title: '原客户名称', dataIndex: 'dealerName', render: (text, record, index) => {
      return index == 0 ? record.dealerName : '--'
    } },
    { title: '目标客户名称', dataIndex: 'targetName', render: (text, record, index) => {
      return index > 0 ? record.dealerName : '--'
    } },
    { title: '客户类型', dataIndex: 'dealerType' },
    { title: '物料分类名称', dataIndex: 'groupName' },
    { title: '配额有效期', dataIndex: 'quotaStartTime', render: (text, record) => {
      let render
      render = text ? dayjs(text).format('YYYY-MM-DD') : ''
      render +=  record.quotaEndTime ? '~' + dayjs(record.quotaEndTimeext).format('YYYY-MM-DD') : ''
      return render
    } },
    { title: '原可用配额数量', dataIndex: 'quotaCanNum' },
    { title: '转移配额数量', dataIndex: 'modifyNum', render: (text, record) => {
      return <InputNumber value={text} onChange={(value) => changeData(record, 'modifyNum', value)} min={0} max={TRANSFER_MAX} />
    } },
    { title: '调整后剩余可用数量', dataIndex: 'modifyAfterNum' },
  ]

  return (
    <UdTable
      dataSource={dataSource}
      columns={columns}
      pagination={false}
    />
  )
}

export default React.memo(TerminalTable)

interface ITerminalTableProps {
  dataSource: any[]
  changeTableData: (data: any) => void
}
